---
title: Accordion
description: Used to show and hide sections of related content on a page
links:
  source: components/accordion
  storybook: components-accordion--basic
  recipe: accordion
  ark: https://ark-ui.com/react/docs/components/accordion
---

<ExampleTabs name="accordion-basic" />

## Anatomy

```js
import { Accordion } from '@saas-ui/react/accordion'

function Parts() {
  return (
    <Accordion.Root>
      <Accordion.Item>
        <Accordion.ItemTrigger />
        <Accordion.ItemContent />
      </Accordion.Item>
    </Accordion.Root>
  )
}
```

## Examples

### Controlled

Set the accordion that shows up by default.

<ExampleTabs name="accordion-controlled" />

### With Icon

Use the `AccordionItemIcon` to add an icon to each accordion item.

<ExampleTabs name="accordion-with-icon" />

### Expand Multiple Items

Use the `multiple` prop to allow multiple items to be expanded at once.

<ExampleTabs name="accordion-with-multiple" />

### Sizes

Use the `size` prop to change the size of the accordion.

<ExampleTabs name="accordion-sizes" />

### Variants

Use the `variant` prop to change the visual style of the accordion. Values can
be either `outline`, `elevated`, `contained` or `plain`.

<ExampleTabs name="accordion-variants" />

### Disabled Item

Pass the `disabled` prop to disable an accordion item to prevent it from being
expanded or collapsed.

<ExampleTabs name="accordion-with-disabled-item" />

## Props

### Root

<PropTable component="Accordion" part="Root" />

### Item

<PropTable component="Accordion" part="Item" />

### ItemTrigger

<PropTable component="Accordion" part="ItemTrigger" />

### ItemContent

<PropTable component="Accordion" part="ItemContent" />
